<template>
    <div class="container">
        <div class="handle-box">
            <el-form ref="form" :model="form" label-width="90px" class="flex">
                <el-form-item label="姓名：">
                    <el-input v-model="name" placeholder="请输入姓名" class="handle-input mr10" @input="mohu()"></el-input>
                </el-form-item>
                <el-form-item label="卡号：">
                    <el-input v-model="cardnumber" placeholder="请输入卡号" class="handle-input mr10"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="phone" placeholder="请输入手机号" class="handle-input mr10"></el-input>
                </el-form-item>
                <el-form-item label="楼号：">
                    <el-input v-model="building" placeholder="请输入楼号" class="handle-input mr10"></el-input>
                </el-form-item>
                <el-form-item label="单元号：">
                    <el-input v-model="unit" placeholder="请输入单元号" class="handle-input mr10"></el-input>
                </el-form-item>
                <el-form-item label="门牌号：">
                    <el-input v-model="door" placeholder="请输入门牌号" class="handle-input mr10"></el-input>
                </el-form-item>
                <!-- <el-form-item label="日期范围：">
                       <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                    <!-- <el-button type="danger" icon="el-icon-circle-close">清空</el-button> -->
                    <el-button type="success" icon="el-icon-circle-plus-outline" @click="addlistdatadiglog()">新增</el-button>
                    <el-button type="primary" @click="exportToExcel()" style="background: #409eff; border: 1px solid #409eff">导出列表</el-button>
                    <el-button style="padding:0;border:0">
                             <el-upload
                            action="/上传文件的接口"
                            :on-change="onChange"
                            :auto-upload="false"
                            :show-file-list="false"
                            accept=".xls, .xlsx"  class="upload">
                        <el-button type="warning" icon="el-icon-folder-add" style="width:97px;height:33px">导入列表</el-button>
                    </el-upload>
                        </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" :row-class-name="addindex">
            <el-table-column type="index" :index="indexMethod" label="ID"></el-table-column>
            <el-table-column prop="VILLAGE_NAME" label="所属小区"  align="center"></el-table-column>
            <el-table-column prop="NAME" label="居民姓名" width="80" align="center"></el-table-column>
            <!-- <el-table-column prop="VILLAGE_NO" label="小区ID"></el-table-column> -->
            <el-table-column prop="SIMCARD_NO" label="卡号"></el-table-column>
            <el-table-column prop="SEX" label="性别"></el-table-column>
            <el-table-column prop="IDNUMBER" label="身份证号"></el-table-column>
            <el-table-column prop="PHONE" label="联系电话"></el-table-column>
            <el-table-column prop="BUILDING" label="楼号"></el-table-column>
            <el-table-column prop="UNIT" label="单元号"></el-table-column>
            <el-table-column prop="DOOR" label="门牌号"></el-table-column>
            <!-- <el-table-column prop="CREATE_DATE" label="注册日期"></el-table-column> -->
            <!-- <el-table-column prop="ISUSE" label="是否启用"></el-table-column> -->
            <!-- <el-table-column prop="PHOTO" label="照片"></el-table-column> -->
            <el-table-column prop="REMARK" label="备注"></el-table-column>
            <!-- <el-table-column v-for="item in integral" label="积分">
                {{item}}
                </el-table-column> -->
            <!-- <el-table-column prop="cardnumber" label="卡号"></el-table-column> -->
            <!-- <el-table-column prop="registrationdate" label="注册日期"></el-table-column> -->
            <!-- <el-table-column prop="state" label="状态"></el-table-column> -->
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> |
                    <el-button type="text" @click="dellistdata(scope.row)" style="color: red">删除</el-button> |
                    <el-button type="text" @click="handle()" style="color: #2a47bd">积分管理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
        <!-- 编辑弹出框 -->`
        <el-dialog v-dialogDrag title="编辑小区" :visible.sync="editVisible" width="50%">
            <el-form ref="editfrom" :model="editfrom" label-width="70px" class="display">
                <el-form-item label="居民姓名：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="editfrom.NAME"></el-input>
                </el-form-item>
                <el-form-item label="所属行政区：" :label-width="labelwidth" class="wid50">
                    <el-select v-model="ruleForm.REGION_ID" placeholder="请选择行政区" @change="changevalue">
                        <el-option
                            v-for="item in option"
                            :key="item.REGION_ID"
                            :label="item.REGION_NAME"
                            :value="item.REGION_NAME"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属街道：" :label-width="labelwidth" class="wid50">
                       <el-select v-model="ruleForm.STREET_ID" placeholder="请选择" @change="changecommunitvalue">
                          <el-option v-for="item in optionsstreet" :key='item.STREET_ID' :label="item.STREET_NAME" :value="item.STREET_ID">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属社区：" :label-width="labelwidth" class="wid50">
                    <el-select v-model="ruleForm.COMMUNITY_ID" placeholder="请选择" @change="changeplot">
                      <el-option v-for="item in optionscommunit" :key='item.COMMUNITY_ID' :label="item.COMMUNITY_NAME" :value="item.COMMUNITY_ID">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="小区：" :label-width="labelwidth" class="wid50">
                    <el-select v-model="ruleForm.VILLAGE_ID" placeholder="请选择" >
                      <el-option v-for="item in optionsplot" :key='item.VILLAGE_ID' :label="item.VILLAGE_NAME" :value="item.VILLAGE_ID">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="卡号：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="editfrom.SIMCARD_NO"></el-input>
                </el-form-item>
                <el-form-item label="性别：" :label-width="labelwidth" class="wid50">
                    <el-select v-model="editfrom.SEX" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="editfrom.IDNUMBER"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="editfrom.PHONE"></el-input>
                </el-form-item>
                <el-form-item label="楼号：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="editfrom.BUILDING"></el-input>
                </el-form-item>
                <el-form-item label="单元：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="editfrom.UNIT"></el-input>
                </el-form-item>
                <el-form-item label="门牌号：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="editfrom.DOOR"></el-input>
                </el-form-item>
                <!-- <el-form-item label="注册日期：" :label-width="labelwidth" class="wid50"> -->
                <!-- <el-date-picker
                          v-model="form.createdate"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker> -->
                <!-- </el-form-item> -->
                <el-form-item label="是否启用：" :label-width="labelwidth" class="wid50">
                    <el-select v-model="editfrom.ISUSE" placeholder="请选择是否启用">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="editfrom.REMARK"></el-input>
                </el-form-item>
                <!-- <el-form-item label="照片：" :label-width="labelwidth" class="wid50">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        action='http://111.160.78.62:5575/UpLoadImageFiles?src=01900/居民'
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :auto-upload="false"
                        :file-list="fileList"
                        :before-upload="handleBeforeUpload"
                        list-type="picture"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增弹出框 -->
        <el-dialog v-dialogDrag title="新增小区" :rules="rules" :visible.sync="addlistdatadiaglog" width="50%">
            <el-form ref="form" :model="ruleForm" label-width="70px" class="display">
                <el-form-item label="居民姓名：" prop="name" :label-width="labelwidth" class="wid50">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="所属地区：" :label-width="labelwidth" class="wid50">
                       <el-select v-model="ruleForm.PARENT_ID" placeholder="请选择" @change="changevalue">
                          <el-option v-for="item in option" :key='item.REGION_ID' :label="item.REGION_NAME" :value="item.REGION_ID" >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属街道：" :label-width="labelwidth" class="wid50">
                       <el-select v-model="ruleForm.STREET_ID" placeholder="请选择" @change="changecommunitvalue">
                          <el-option v-for="item in optionsstreet" :key='item.STREET_ID' :label="item.STREET_NAME" :value="item.STREET_ID">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属社区：" :label-width="labelwidth" class="wid50">
                        <el-select v-model="ruleForm.COMMUNITY_ID" placeholder="请选择" @change="changeplot">
                          <el-option v-for="item in optionscommunit" :key='item.COMMUNITY_ID' :label="item.COMMUNITY_NAME" :value="item.COMMUNITY_ID">
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="小区：" :label-width="labelwidth" class="wid50" >
                        <el-select v-model="ruleForm.VILLAGE_ID" placeholder="请选择">
                          <el-option v-for="item in optionsplot" :key='item.VILLAGE_ID' :label="item.VILLAGE_NAME" :value="item.VILLAGE_ID">
                          </el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item label="卡号：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="ruleForm.simcardno"></el-input>
                </el-form-item>
                <el-form-item label="性别：" :label-width="labelwidth" class="wid50">
                    <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="ruleForm.Idnumber"></el-input>
                </el-form-item>
                <el-form-item label="联系电话：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="楼号：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="ruleForm.building"></el-input>
                </el-form-item>
                <el-form-item label="单元：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="ruleForm.unit"></el-input>
                </el-form-item>
                <el-form-item label="门牌号：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="ruleForm.door"></el-input>
                </el-form-item>
                <!-- <el-form-item label="注册日期：" :label-width="labelwidth" class="wid50">
                        <el-date-picker
                          v-model="ruleForm.createdate"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item> -->
                <el-form-item label="是否启用：" :label-width="labelwidth" class="wid50">
                    <el-select v-model="ruleForm.isuse" placeholder="请选择是否启用">
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：" :label-width="labelwidth" class="wid50">
                    <el-input v-model="ruleForm.remark"></el-input>
                </el-form-item>
                <!-- <el-form-item label="照片：" :label-width="labelwidth" class="wid50">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        action='http://111.160.78.62:5575/UpLoadImageFiles?src=01900/居民'
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        :auto-upload="false"
                        :file-list="addfileList"
                        :before-upload="handleBeforeUpload"
                        list-type="picture"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addlistdatadiaglog = false">取 消</el-button>
                <el-button type="primary" @click="addlistdata(ruleForm)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import '../../assets/css/common.css'
// import { uploadImgToBase64 } from '../../utils/' // 导入本地图片转base64方法

export default {
  data () {
    return {
      ImagePaths: '',
      uploadData: {
        suffix: "jpg"
      },
      fileList:[],
      addfileList: [],
      ruleForm: {
        name: '',
        imageUrl: '',
      },
      imgBroadcastList: [], // 储存旬中的图片列表
      imgsStr: '', // 后端需要的多张图base64字符串，分割
      dialogVisible: false,
      dialogImageUrl: '',
      currentPage: 1, //初始页
      pagesize: 10,    //    每页的数据
      userList: [],
      address: '',
      name: '',
      cardnumber: '',
      phone: '',
      building: '',
      unit: '',
      door: '',
      value1: '',
      labelswidth: '160px',
      addlistdatadiaglog: false,
      diaLogForm: {
        goodsName: '', // 商品名称字段
        imgBroadcastList: [], // 储存选中的图片列表
        imgsStr: ''   // 后端需要的多张图base64字符串 , 分割
      },
      options: [],
      optionsstreet:[],
      optionscommunit:[],
      optionsplot: [],
      form: {
        integral: '',
        score: '',
        remaining: '',
        chuyuintegral: '',
        chuyuscore: '',
        chuyuremaining: '',
        youhaiintegral: '',
        youhaiscore: '',
        youhairemaining: '',
        qitaintegral: '',
        qitascore: '',
        qitaremaining: ''
      },
      ruleForm: {
        name: '',
        villageno: '',
        simcardno: '',
        sex: '',
        Idnumber: '',
        phone: '',
        building: '',
        unit: '',
        door: '',
        createdate: '',
        isuse: '',
        imageUrl: '',
        remark: ''
      },
      rules: {
        name: [
          // { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      PHONE: '',
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      labelwidth: '120px',
      editfrom: '',
      url:'',
      sheetData: ''
    }
  },
  created () {
    // this.getData();
    this.getlistdata();
    this.loadCheckbox_SCV()
    this.getselect()
    this.getImageFile()
    // console.log(this.imgsStr)
    
    // this.createMiniQrcode()
  },
  methods: {
    indexMethod(index) {
          return index + 1;
        },
    getImageFile () {
    // console.log(this.url)
      this.$axios({
        url: this.$urlBase+ '/GetImageFile',
        method: 'Get',
        // params: {
        //   src: '01900/居民',
        //   fileName:file.name,
        //   files:this.ImagePaths
        // }
      }).then(res => {
        console.log(res)
        res.data.filter(item=>{
          return item.url = 'http://' + item.url
        })
        this.fileList = res.data
        // if (res.data.IsSucess) {
        //   this.$message.success('删除成功');
        //   this.getlistdata()
        // } else {
        //   this.$message.error('删除失败')
        // }
      })
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submitUpload () {
      console.log(this.$refs.upload)
      // this.$refs.upload.submit();
    },
    handleBeforeUpload (file) {
      this.ImagePaths += file.name + '|' + '01900/居民/' + file.name + ';'
      console.log('before')
      if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
        })
      }
      let size = file.size / 1024 / 1024 / 2
      if (size > 2) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
      }
    },
    handleRemove (file, fileList) {
      // debugger
      this.$axios({
        // url: this.$url + '/DeletePeopleApi',
        url: this.$urlBase+ '/DeleteImageFiles',
        method: 'Delete',
        params: {
          src: '01900/居民',
          fileName: file.name,
          files: this.ImagePaths
        }
      }).then(res => {
        console.log(res)
        // if (res.data.IsSucess) {
        //   this.$message.success('删除成功');
        //   this.getlistdata()
        // } else {
        //   this.$message.error('删除失败')
        // }
      })
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    // 行政区下拉列表
    getselect () {
      this.$axios({
        url: this.$url + '/GetRegionListApi',
        method: 'get'
      }).then(res => {
        this.option = Object.assign([], res.data)
      })
    },
    // 获取街道
    async changevalue(e){
        const { data } =await this.$axios.get(this.$url+'/sreetListsApi?id='+e);
        this.optionsstreet = data.filter(item => {
          console.log(item)
            return item 
        })
    },
    // 获取社区
    async changecommunitvalue(e){
        console.log(e)
        const { data } =await this.$axios.get(this.$url+'/communityListsApi?id='+e);
        this.optionscommunit = data.filter(item => {
            console.log(item)
            return item 
        })
    },
    // 获取小区
    async changeplot(e){
        console.log(e)
        const { data } =await this.$axios.get(this.$url+'/villageListsApi?id='+e);
        this.optionsplot = data.filter(item => {
            console.log(item)
            return item 
        })
    },
    // 图片
    // imgPreview(file, fileList){
    //     console.log(file, fileList)
    //     let fileName = file.name;
    // 	let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
    // 	if (regex.test(fileName.toLowerCase())) {
    //       this.posterURL = URL.createObjectURL(file.raw)  // 获取URL
    //       console.log(this.posterURL)
    // 	} else {
    // 	  this.$message.error('请选择图片文件');
    // 	}
    // },
    // setImage(e){
    //     console.log(e)
    //             const file = e.target.files[0];
    //             console.log(file)
    //             if (!file.type.includes('image/')) {
    //                 return;
    //             }
    //             const reader = new FileReader();
    //             reader.onload = (event) => {
    //                 this.dialogVisible = true;
    //                 this.imgSrc = event.target.result;
    //                 this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
    //             };
    //             console.log(reader.readAsDataURL(file))
    //             reader.readAsDataURL(file);
    //         },
    // 图片选择后 保存在 diaLogForm.imgBroadcastList 对象中
    imgBroadcastChange (file, fileList) {
      //    this.createMiniQrcode(URL.createObjectURL(file.raw)
      const isLt2M = file.size / 1024 / 1024 < 2 // 上传头像图片大小不能超过 2MB
      if (!isLt2M) {
        this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
        this.$message.error('图片选择失败，每张图片大小不能超过 2MB,请重新选择!')
      } else {
        // console.log(URL.createObjectURL(file.raw))
        this.imgsStr = URL.createObjectURL(file.raw)
        this.diaLogForm.imgBroadcastList.push(file)
        //  console.log(this.diaLogForm.imgBroadcastList.push(file))
        //  this.submitDialogData()
      }
    },
    // 有图片移除后 触发
    imgBroadcastRemove (file, fileList) {
      this.diaLogForm.imgBroadcastList = fileList
    },
    // 提交弹窗数据
    async submitDialogData () {
      const imgBroadcastListBase64 = []
      console.log('图片转base64开始...')
      // 并发 转码轮播图片list => base64
      const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
        const response = await uploadImgToBase64(file.raw)
        return response.result.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64,
      })
      // 按次序输出 base64图片
      for (const textPromise of filePromises) {
        imgBroadcastListBase64.push(await textPromise)
      }
      console.log('图片转base64结束..., ', imgBroadcastListBase64)
      this.diaLogForm.imgsStr = imgBroadcastListBase64.join()
      // this.imgsStr = Object.assign('',this.diaLogForm.imgsStr)
      // this.imgsStr =this.diaLogForm.imgsStr
      // console.log(this.diaLogForm.imgsStr)
      const res = await addCommodity(this.diaLogForm)       // 发请求提交表单
      if (res.status) {
        this.$message.success('添加商品成功')
        // 一般提交成功后后端会处理，在需要展示商品地方会返回一个图片路径 
      }
    },
    createMiniQrcode (blob) {
      let img = document.createElement('img')
      img.onload = function (e) {
        // 元素的onload 事件触发后将销毁URL对象, 释放内存。
        window.URL.revokeObjectURL(img.src)
      }
      // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL。
      // 这个 URL 以blob://开头,表明对应一个 Blob 对象。
      //   img.src = window.URL.createObjectURL(blob)
      console.log(window.URL.createObjectURL(blob))
      //   document.querySelector('.imgQrCode').appendChild(img)
    },
    async loadCheckbox_SCV () {
      var url = this.$url + '/GetGroupsApi?ClientNo=' + localStorage.getItem('clentno');
      const { data } = await this.$axios.get(url)
      this.options = data.filter(item => {
        return item
      })
    },
    addlistdatadiglog () {
      this.addlistdatadiaglog = true;
    },
    //新增
    addlistdata (formName) {
      console.log(this.ruleForm)
      // console.log(this.imgsStr)
      // debugger
      console.log(this.ruleForm.villageno)
      console.log({
        NAME: this.ruleForm.name,
        VILLAGE_NO: this.ruleForm.VILLAGE_ID,
        SIMCARD_NO: this.ruleForm.simcardno,
        sex: this.ruleForm.sex,
        IdNumber: this.ruleForm.Idnumber,
        PHONE: this.phone,
        BUILDING: this.ruleForm.building,
        UNIT: this.ruleForm.unit,
        DOOR: this.ruleForm.door,
        CREATE_DATE: this.ruleForm.createdate,
        ISUSE: this.ruleForm.isuse,
        PHOTO: this.ruleForm.imageUrl,
        REMARK: this.ruleForm.remark
      })
      this.$axios({
        url: this.$url + '/AddPeopleApi',
        method: 'get',
        params: {
          NAME: this.ruleForm.name,
          VILLAGE_NO: this.ruleForm.VILLAGE_ID,
          SIMCARD_NO: this.ruleForm.simcardno,
          sex: this.ruleForm.sex,
          IdNumber: this.ruleForm.Idnumber,
          PHONE: this.ruleForm.phone,
          BUILDING: this.ruleForm.building,
          UNIT: this.ruleForm.unit,
          DOOR: this.ruleForm.door,
          CREATE_DATE: this.ruleForm.createdate,
          ISUSE: this.ruleForm.isuse,
          PHOTO: this.ruleForm.imageUrl,
          REMARK: this.ruleForm.remark
        }
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.getlistdata()
          this.addlistdatadiaglog = false
          this.$message.success('新增成功')
        }
      })
    },
                        // 文件选择回调
   onChange(file, fileList) {
    //  console.log(fileList);
     this.fileData = file; // 保存当前选择文件
     this.readExcel(); // 调用读取数据的方法
   },
   // 读取数据
   readExcel(e) {
     let that = this;
     const files = that.fileData;
     console.log(files);
     if (!files) {
       //如果没有文件
       return false;
     } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
       this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
       return false;
     }
     const fileReader = new FileReader();
     console.log(fileReader)
     fileReader.onload = ev => {
       try {
         const data = ev.target.result;
        //  console.log(ev.target)
        //  console.log(this);
         const workbook = this.XLSX.read(data, {
           type: "binary"
         });
         if (workbook.SheetNames.length >= 1) {
          //  this.$message({
          //    message: "导入数据表格成功",
          //    showClose: true,
          //    type: "success"
          //  });
         }
         const wsname = workbook.SheetNames[0]; //取第一张表
         const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
        //  console.log(ws)
        //  this.$axios({
        //    url:this.$url +'/ImportPeopleApi' ,
        //    method:'post',
        //    data: ws
        //  }).then(res=>{
        //      console.log(res)
        //  })
         that.outputs = []; //清空接收数据
         let exceldata =  [] 
         ws.filter(item=>{
             var sheetData = {
             VILLAGE_NAME: item['所属小区'],
             NAME: item["居民姓名"],
             SIMCARD_NO: item["卡号"],
             SEX: item['性别'],
             IDNUMBER: item['身份证号'],
             PHONE: item["电话"],
             BUILDING: item["楼号"],
             UNIT: item["单元号"],
             DOOR: item["门号"],
             REMARK: item["备注"],
           }
             console.log(sheetData);
             exceldata.push(sheetData)
         })
         console.log(exceldata)
        this.$axios({
          url: this.$url + '/ImportPeopleApi',
          method: 'post',
          data: exceldata
        }).then(res=>{
          console.log(res)
          if(res.data.IsSucess){
            this.$message.success('导入成功')
            this.getlistdata()
          }
        })
         this.$refs.upload.value = "";
       } catch (e) {
         return false;
       }
     };
     // 如果为原生 input 则应是 files[0]
     fileReader.readAsBinaryString(files.raw);
   },
    // 导出功能
    exportToExcel () {
      require.ensure([], () => {
        const { export_json_to_excel } = require('../../excel/export2Excel');
        const tHeader = ['居民姓名', '卡号', '性别', '身份证号', '电话', '楼号', '单元号', '门号', '备注'];
        const filterVal = ['NAME', 'SIMCARD_NO', 'SEX', 'IDNUMBER', 'PHONE', 'BUILDING', 'UNIT', 'DOOR','REMARK'];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        console.log(data)
        export_json_to_excel(tHeader, data, "居民信息列表");
      });
    },
    importToExcel(){
      
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.ruleForm.imageUrl = '';
    },
    handleChange (file, fileList) {
      this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
    },

    beforeUpload (file) {
      return true;
    },
    sucesslistdata () {
      this.addlistdatadiaglog == false
    },
    //获取数据
    getlistdata () {
      // debugger
      console.log(localStorage.getItem('clentno'))
      this.$axios({
        url: this.$url + '/GetPeopleListApi',
        method: 'get',
        params: {
          ClientNo: localStorage.getItem('clentno')
        }
      }).then(res => {
        if (res.status == '200') {
          console.log(res.data)
          this.tableData = res.data.filter(item => {
            item.CREATE_DATE = item.CREATE_DATE.replace('T', ' ')
            return item
            if (item) {
              this.createMiniQrcode(item.PHOTO)
            }
          })
        }
      })
    },
    //删除
    dellistdata (row) {
          this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.$axios({
                    url:this.$url+'/DeletePeopleApi',
                    method: 'get',
                    params:{
                        VID: row.VID
                    }
                }).then(res=>{
                    this.getlistdata()
                })
                    this.$message.success('删除成功');
                    
                })
                .catch(() => {});
      // this.$axios({
      //   url: this.$url + '/DeletePeopleApi',
      //   method: 'get',
      //   params: {
      //     VID: row.VID
      //   }
      // }).then(res => {
      //   if (res.data.IsSucess) {
      //     this.$message.success('删除成功');
      //     this.getlistdata()
      //   } else {
      //     this.$message.error('删除失败')
      //   }
      // })
      // console.log(e.target.parentElement.parentElement.parentElement.parentElement)
    },
    mohu () {
      var search = this.name;
      // console.log(search)
      var newdate = [];
      if (search == '') {
        this.getlistdata()
      } else {

      }
      // if(search){
      //     this.tableData.filter(item=>{
      //         if(item.name.indexOf(search) != -1){
      //             console.log(item)
      //         }
      //     })
      // }
      // this.tableData = newdate
    },
    // 积分展示
    handle () {
      this.$router.push('/residentsintegral')
    },
    //编辑
    handleEdit (index, row) {
      console.log(row)
      this.$axios({
        url: this.$urlBase+ '/GetPeopleImageApi',
        method: 'post',
        VID: row.VID
      }).then(res=>{
        console.log(res)
      })
      if(row.ISUSE){
        row.ISUSE = '是'
      }else{
        row.ISUSE = '否'
      }
      // if(this.editfrom.ISUSE){
      //   this.editfrom.ISUSE = '是'
      // }else{
      //   this.editfrom.ISUSE = '否'
      // }
      this.editfrom = Object.assign({}, row);
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit () {
      let studenteList = this.editfrom;
      console.log(studenteList)
      console.log({
          VID: studenteList.VID,
          NAME: studenteList.NAME,
          VILLAGE_NO: studenteList.VILLAGE_NO,
          SIMCARD_NO: studenteList.SIMCARD_NO,
          sex: studenteList.SEX,
          IdNumber: studenteList.IDNUMBER,
          PHONE: studenteList.PHONE,
          BUILDING: studenteList.BUILDING,
          UNIT: studenteList.UNIT,
          DOOR: studenteList.DOOR,
          PHOTO: studenteList.PHOTO,
          REMARK: studenteList.REMARK
        })
        const model = {
          VID: studenteList.VID,
          NAME: studenteList.NAME,
          VILLAGE_NO: studenteList.VILLAGE_NO,
          SIMCARD_NO: studenteList.SIMCARD_NO,
          sex: studenteList.SEX,
          IdNumber: studenteList.IDNUMBER,
          PHONE: studenteList.PHONE,
          BUILDING: studenteList.BUILDING,
          UNIT: studenteList.UNIT,
          DOOR: studenteList.DOOR,
          PHOTO: studenteList.PHOTO,
          REMARK: studenteList.REMARK
        }
        console.log(model)
      this.$axios({
        url: this.$url + '/UpdatePeopleApi',
        method: 'post',
        data: {
          VID: studenteList.VID,
          NAME: studenteList.NAME,
          VILLAGE_NO: studenteList.VILLAGE_NO,
          SIMCARD_NO: studenteList.SIMCARD_NO,
          sex: studenteList.SEX,
          IdNumber: studenteList.IDNUMBER,
          PHONE: studenteList.PHONE,
          BUILDING: studenteList.BUILDING,
          UNIT: studenteList.UNIT,
          DOOR: studenteList.DOOR,
          PHOTO: studenteList.PHOTO,
          REMARK: studenteList.REMARK
        }
      }).then(item => {
        console.log(item)
        if (item.data.IsSucess) {
          this.$message.success('编辑成功')
          this.getlistdata()
        }
      })
      this.editVisible = false;

    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pagesize = size;
      console.log(this.pagesize)
    }
  }
}
</script>
<style scoped>
.el-select {
    width: 100%;
}
.el-cascader--small {
    width: 100%;
}
.el-date-editor {
    width: 100%;
}
/deep/.el-upload__input {
    display: none !important;
}
/deep/.el-upload__input{
    display: none;
}
/deep/.el-form-item .el-form-item__content{
    display: flex;
}
</style>